<template>
    <div  class="header">
        <!--展开和收缩的图标-->
        <div style="font-size: 20px">
            <i class="el-icon-s-fold" v-if="isShow" @click="changeIsShow"></i>
            <i class="el-icon-s-unfold" v-if="!isShow" @click="changeIsShow"></i>
        </div>
        <!--用户信息展示-->
        <div>
            <el-header style="text-align: right; font-size: 12px">
                <span>{{ nickName }}</span>
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-left: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="editUserInfo">个人资料</el-dropdown-item>
                        <el-dropdown-item @click.native="showEditPassword">修改密码</el-dropdown-item>
                        <el-dropdown-item @click.native="logout">安全退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-header>
        </div>
    </div>
</template>

<script>
export default {
    name: "HeaderView",
    data() {
        return {
            isShow: true,
            nickName: sessionStorage.getItem("nickName")
        }
    },
    methods:{

        logout() {
            console.log("安全退出")
            this.$confirm('是否退出?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '退出成功!',
                    onClose: () => {
                        //清除token  nickName
                        window.sessionStorage.removeItem("token")
                        window.sessionStorage.removeItem("nickName")
                        //清空菜单数据
                        this.$store.commit("changeMenuData",[])
                        this.$router.push("/login")
                    }
                });

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },

        changeIsShow(){
            this.isShow  = !this.isShow
            // 调用 vuex中的mutations提供的修改 IsCollapse值的 changeIsCollapse 函数
            this.$store.commit('changeIsCollapse')
            // 改变navbar的宽度  changeCollapseClass
            this.$store.commit('changeCollapseClass')
        }
    }
}
</script>

<style scoped>
.header {
    display: flex;
    justify-content: space-between;
    height: 60px;
    padding-left: 20px;
    padding-top: 10px;
    box-sizing: border-box;
    box-shadow: 0px 5px 5px #ddd;
}
</style>